<template>
	<view class="page-crumb">
		<view class="crumb-list">
			<view class="crumb-item" v-for="(item,index) of crumbData" :key="index" @click="handleClick(item,index)">
				<view class="item-title">
					{{item.label}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 面包屑
	 */
	export default {
		name: "page-crumb"
	}
</script>

<script setup>
	import {
		ref
	} from "vue"

	/**
	 * 定义emit
	 */
	const emit = defineEmits(["crumb-filter"])

	/**
	 * props传入
	 */
	const props = defineProps({
		crumbData: {}
	})

	/**
	 * 初始化数据
	 */
	const crumbData = props.crumbData

	/**
	 * 默认选中数据
	 */
	const activeIndex = ref(0)

	/**
	 * 点击事件
	 */
	const handleClick = (item, index) => {
		activeIndex.value = index
		handleFilter(item.value)
	}

	/**
	 * 发送数据给上一级
	 */
	const handleFilter = (value) => {
		emit('crumb-filter', value)
	}

	handleFilter(crumbData[0].value)
</script>

<style>
	.page-crumb{
		flex:0;
		display: flex;
		flex-direction: column;
	}
</style>